<template>

  <el-form size="large"
           status-icon
           :rules="rules"
           ref="updatePwdForm"
           :model="formData"
           label-width="80">
    <el-form-item v-if="showOldPwd" prop="oldPassword" label="原密码">
      <el-input
          :type="passwordTypes[0]"
          v-model="formData.oldPassword"
          auto-complete="off"
          :placeholder="$t('user.updatePwd.oldPassword')">
        <template #append>
          <el-icon @click="showPassword(0)">
            <View/>
          </el-icon>
        </template>


      </el-input>
    </el-form-item>
    <el-form-item prop="password" label="新密码">
      <el-input
          :type="passwordTypes[1]"
          v-model="formData.password"
          auto-complete="off"
          :placeholder="$t('user.updatePwd.inputPassword')">
        <template #append>
          <el-icon @click="showPassword(1)">
            <View/>
          </el-icon>
        </template>


      </el-input>
    </el-form-item>
    <el-form-item prop="rePassword" label="确认密码">
      <el-input
          :type="passwordTypes[2]"
          v-model="formData.rePassword"
          auto-complete="off"
          :placeholder="$t('user.updatePwd.inputRePassword')">
        <template #append>
          <el-icon @click="showPassword(2)">
            <View/>
          </el-icon>
        </template>

      </el-input>
    </el-form-item>
    <slot name="default"></slot>
  </el-form>

</template>

<script>
import {View} from "@element-plus/icons-vue";
import {deepClone} from "utils/util";

export default {
  name: "startUpdateUserPwd",
  components: {View},
  props: {
    showOldPwd: {
      type: Boolean,
      default: true,
    },
    userId: {
      type: String,
      required: true,
    },
  },

  computed: {
    rules() {
      return {
        oldPassword: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, message: "密码长度最少为6位", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, message: "密码长度最少为6位", trigger: "blur"}
        ],
        rePassword: [
          {required: true, message: "请输入确认密码", trigger: "blur"},
          {min: 6, message: "密码长度最少为6位", trigger: "blur"},
          {required: true, trigger: "blur", validator: this.validatePwd}
        ],
      }
    },
  },
  watch: {
    userId(val, old) {
      this.formData.userId = val;
    }
  },

  data() {
    return {
      formData: {},
      passwordTypes: ["password", "password", "password"],
    }
  },
  created() {
    this.formData.userId = this.userId;
  },
  methods: {

    rest() {
      this.passwordTypes = ["password", "password", "password"];
      this.formData = {}
    },
    showPassword(index) {
      let passwordType = this.passwordTypes[index];
      passwordType === "" ? (passwordType = "password") : (passwordType = "");
      this.passwordTypes[index] = passwordType
    },
    validatePwd(rule, value, callback) {
      if (this.formData.password !== value) {
        callback(new Error("两次输入密码一致！"));
      } else {
        callback();
      }
    },
    submitData() {
      return new Promise((resolve, reject) => {
        this.$refs.updatePwdForm.validate((valid) => {
          if (!valid) {
            reject(valid);
            return
          }
          let data = deepClone(this.formData)
          resolve(data)
        })

      })

    }
  }
}
</script>

<style scoped>

</style>
